import React, { useState, useCallback } from 'react';
import { Modal, Form, Input, Button, Checkbox } from 'antd';
// import SelectClassWindow from '@/components/SelectClassWindow/SelectClassWindow';

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
}

const CreateCourse2: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel } = props;

  const [isShowSelectClassWindow, setIsShowSelectClassWindow] = useState<boolean>(false);

  const handleShow = () => {
    setIsShowSelectClassWindow(true);
  };

  const handleHidden = useCallback(() => {
    setIsShowSelectClassWindow(false);
  }, []);

  const handleSelect = useCallback((values) => {
    console.log(values);
  }, []);

  return (
    <Modal
      destroyOnClose
      title="新建规则"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form>
        <Form.Item
          name=""
          label="课程组名称"
          rules={[{ required: true, message: '课程名称必须写！' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="所含课程" rules={[{ required: true, message: '所含课程必选！' }]}>
          <Button onClick={handleShow}>选择课程</Button>
          <SelectClassWindow
            visible={isShowSelectClassWindow}
            onCancel={handleHidden}
            onOk={handleSelect}
          />
        </Form.Item>

        <Form.Item
          name="linkYear"
          label="关联学年学期"
          rules={[{ required: true, message: '关联学年学期必选！' }]}
        >
          1
          {/* <Select>
           <Select.Option  ></Select.Option>
       </Select>
       <Select>
           <Select.Option  ></Select.Option>
       </Select> */}
        </Form.Item>
        <Form.Item
          name="classGroupLimit"
          label="设置课程组限制"
          rules={[{ required: true, message: '关联学年学期必选！' }]}
        >
          <Checkbox>课程组内，一个学生只能报名一个计划</Checkbox>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateCourse2;
